<template>
  <div class="common-layout">
    <el-container>
      <el-main>
        <div class="main flex">
          <div class="flex-1 ml-4">
            <el-form ref="formRef" :inline="true" :model="form">
              <el-form-item prop="bTime">
                <div class="block">
                  <span class="demonstration">请选择起始时间：</span>
                  <el-date-picker v-model="form.bTime" type="datetime" placeholder="Select date and time" />
                </div>
              </el-form-item>
              <el-form-item prop="eTime">
                <div class="block">
                  <span class="demonstration">请选择结束时间：</span>
                  <el-date-picker v-model="form.eTime" type="datetime" placeholder="Select date and time" />
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :icon="Search" @click="getlist">搜索</el-button>
                <el-button :icon="Refresh" @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>

            <div class="common-layout-2">
              <el-container>
                <el-header style="text-align: right" height="80px">
                  <el-row>
                    <el-col :span="12">
                      <h1 class="main-title">测试结果管理(展示最近200条)</h1>
                    </el-col>
                    <el-col :span="12">
                    </el-col>
                  </el-row>
                </el-header>
                <el-main>
                  <el-scrollbar :height="isWidth ? '630px' : '418px'">
                    <el-table table-layout="auto" :size="size" :data="datalist" :header-cell-style="{
                      background: '#fafafa',
                      color: '#606266',
                    }" border stripe v-loading="loading" element-loading-background="rgba(255, 255, 255, .5)"
                      element-loading-text="加载中，请稍后..." element-loading-spinner="el-icon-loading"
                      :default-sort="{ prop: 'Time', order: 'descending' }">
                      <el-table-column prop="Time" align="center" label="测试时间" />
                      <el-table-column prop="SNo" align="center" label="学号" />
                      <el-table-column prop="SName" align="center" label="姓名" />
                      <el-table-column prop="PNo" align="center" label="人格编号" />
                      <el-table-column prop="PName" align="center" label="人格" />
                      <el-table-column fixed="right" align="center" label="操作" width="100">
                        <template #default="scope">
                          <el-button class="reset-margin" link type="primary" :size="size"
                            @click="ansDialog(scope.row.Time)">
                            查看结果
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-scrollbar>
                </el-main>
              </el-container>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-dialog title="你的选择" v-model="ansVisible" width="500px">
      <el-scrollbar height="350px">
        <el-table table-layout="auto" :data="choice" style="width: auto" :header-cell-style="{
          background: '#fafafa',
          color: '#606266',
        }" :default-sort="{ prop: 'No', order: 'acending' }">a
          <el-table-column prop="No" label="题号" width="120" align="center" />
          <el-table-column prop="ch" label="选项内容" width="350" align="center" />
        </el-table>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        bTime: "",
        eTime: "",
      },
      nanTime: "",
      datalist: [],
      reslist: [],
      personlist: [],
      stulist: [],
      questionlist: [],
      choice: [],
      loading: true,
      screenWidth: document.body.clientWidth,
      isWidth: false,
      ansVisible: false,
      Personality: [
        { "No": "01", "Name": "ISTJ" }, { "No": "02", "Name": "ISFJ" }, { "No": "03", "Name": "INFJ" }, { "No": "04", "Name": "INTJ" },
        { "No": "05", "Name": "ISTP" }, { "No": "06", "Name": "ISFP" }, { "No": "07", "Name": "INFP" }, { "No": "08", "Name": "INTP" },
        { "No": "09", "Name": "ESTP" }, { "No": "10", "Name": "ESFP" }, { "No": "11", "Name": "ENFP" }, { "No": "12", "Name": "ENTP" },
        { "No": "13", "Name": "ESTJ" }, { "No": "14", "Name": "ESFJ" }, { "No": "15", "Name": "ENFJ" }, { "No": "16", "Name": "ENTJ" }
      ]
    };
  },
  mounted() {
    this.setClient();
    this.getall();
  },
  methods: {
    async getlist() {
      this.loading = true;
      if (this.form.bTime != "") this.form.bTime = this.changeTime(this.form.bTime)
      if (this.form.eTime != "") this.form.eTime = this.changeTime(this.form.eTime)
      console.log(this.datalist)
      let newlist = []
      var idx = 0
      if (this.form.eTime == this.nanTime) {
        for (var i = 0; i < 200; i++) {
          if (this.datalist[i].Time > this.form.bTime) {
            newlist[idx++] = this.datalist[i]
          }
        }
      } else if (this.form.bTime == this.nanTime) {
        for (i = 0; i < 200; i++) {
          if (this.datalist[i].Time < this.form.eTime) {
            newlist[idx++] = this.datalist[i]
          }
        }
      } else {
        if (this.form.bTime > this.form.eTime && this.form.eTime != this.nanTime) {
          this.resetForm();
          return this.$message.error("错误，起始时间大于截止时间，请重新选择！");
        } else {
          for (i = 0; i < this.datalist.length; i++) {
            if (this.form.bTime < this.datalist[i].Time && this.datalist[i].Time < this.form.eTime) {
              newlist[idx++] = this.datalist[i]
            }
          }
        }
      }
      this.datalist = newlist;
      this.loading = false;
    },
    async getall() {
      this.loading = true;
      this.datalist = [];
      const { data: res } = await this.$http.post("api/query/result", { Sno: "", Pno: "" });
      const { data: ans } = await this.$http.post("api/query/studentAll");
      const { data: ret } = await this.$http.post("api/query/questionAll");
      this.questionlist = ret.Data["ret"];
      this.stulist = ans.Data["ret"];
      this.reslist = res.Data["ret"];
      var idx = 0;
      for (var i = 0; i < 200; i++) {
        let each = {
          "Time": this.reslist[i].Time,
          "SNo": this.reslist[i].Sno,
          "PNo": this.reslist[i].Pno,
          "SName": "",
          "PName": "",
          "Ans": this.reslist[i].Ans
        }
        for (var j = 0; j < 16; j++) {
          if (each.PNo == this.Personality[j].No) {
            each.PName = this.Personality[j].Name;
            break;
          }
        }
        for (j = 0; j < this.stulist.length; j++) {
          if (each.SNo == this.stulist[j].No) {
            each.SName = this.stulist[j].Name;
            break;
          }
        }
        this.datalist[idx++] = each;
      }
      console.log(this.datalist)
      this.loading = false;
    },
    resetForm() {
      this.form.bTime = "";
      this.form.eTime = "";
      this.getall();
    },
    changeTime(time) {
      let yy = new Date(time).getFullYear();
      let mm = new Date(time).getMonth() + 1;
      mm = mm < 10 ? '0' + mm : mm;
      let dd = new Date(time).getDate() < 10 ? '0' + new Date(time).getDate() : new Date(time).getDate();
      let hh = new Date(time).getHours() < 10 ? '0' + new Date(time).getHours() : new Date(time).getHours();
      let mf = new Date(time).getMinutes() < 10 ? '0' + new Date(time).getMinutes() : new Date(time).getMinutes();
      let ss = new Date(time).getSeconds() < 10 ? '0' + new Date(time).getSeconds() : new Date(time).getSeconds();
      return yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
    },
    setClient() {
      this.screenWidth = document.body.offsetWidth
      console.log(this.screenWidth)
      if (this.screenWidth < 1550) {
        this.isWidth = false
      } else {
        this.isWidth = true
      }
    },
    ansDialog(Time) {
      this.ansVisible = true;
      var ans = ""
      for (var i = 0; i < this.datalist.length; i++) {
        if (this.datalist[i].Time == Time) {
          ans = this.datalist[i].Ans
        }
      }
      for (i = 0; i < ans.length; i++) {
        let each = { "No": i + 1, "ch": "" }
        if (ans[i] == '1') {
          each.ch = "A." + this.questionlist[i].OPa
        } else {
          each.ch = "B." + this.questionlist[i].OPb
        }
        this.choice[i] = each
      }
    }
  },
};
</script>

<style lang="less" scoped>
.main-title {
  text-align: left;
  color: rgb(0, 0, 0);
  font-size: 25px;
}

.common-layout-1 {
  background-color: rgb(255, 255, 255);
  margin: 20px;
}

.common-layout-2 {
  background-color: rgb(255, 255, 255);
}

.common-layout-2 .el-header {
  position: relative;
  color: var(--el-text-color-primary);
}

.common-layout-2 .el-col {
  margin: auto;
  position: relative;
  color: var(--el-text-color-primary);
}

.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
</style>
